<template>
  <el-container style="height: 1000px; width:1380px;margin-left:0px; margin-right:0px;border: 1px solid #eee">
      <el-header style="height:100px;text-align: right; "> 
          <div style="float:left;width:720px;height:60px;font-size:48px;margin-top:1px">小型图书馆管理系统</div>     
          <span style="position:right;font-size: 24px">{{name}}</span>
      </el-header>
      <el-container>
          <el-aside style="width:160px;margin-top: 0px">
              <switch></switch>
              <SideMenu @indexSelect="listByItem" ref="sideMenu"></SideMenu>
          </el-aside>
          <el-main>
              <MainArea class="main-area" ref="mainArea">
              </MainArea>
          </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import SideMenu from './readerSideMenu.vue'
  import MainArea from './readerMainarea.vue'

  export default {
    name: 'mainpage',
    components: { MainArea,SideMenu },
    data() {
      return {     
        token: window.sessionStorage.getItem('token'),
        name: window.sessionStorage.getItem('username')
      };
    },
    methods: {
      listByItem () {       
        var cid = this.$refs.sideMenu.cid  
        this.$refs.mainArea.cid = cid         
      }
    }
  }
</script>

<style scoped>
  .main-area {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .el-aside {
    color: #333;
    background-color: rgb(191, 191, 252);
  }
  .el-header {
    background-color: #5e9ef1;
    color: #333;
    line-height: 100px;
  }
</style>